﻿@using ApCMS.Models;
@model ApCMS.Models.HomeModel
@{
    ViewBag.Title = "首页";
    LayoutModels layoutModels = new LayoutModels();    
}
<div id="slider" class="revolution-slider">
    <div class="container clearfix">
        <div class="fullwidthbanner-container" style="max-height: 400px; height: 400px;">
            <div class="fullwidthbanner" style="max-height: 400px; height: 400px;">
                <ul class="clearfix">
                    <li data-transition="random" data-slotamount="10" data-delay="12500" data-masterspeed="300">
                        <img src="@Url.Content("~/Themes/coworker/Content/images/banner/banner_bg.jpg")" alt="bg image" />
                        <div class="caption large_text lft" style="background-color: #8AAD1F; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
                            font-weight: 300; font-size: 28px; padding: 5px 8px;" data-x="330" data-y="38"
                            data-speed="300" data-start="1000" data-easing="easeOutExpo" data-end="12200"
                            data-endspeed="300" data-endeasing="easeInBack">
                            Popular Products</div>
                        <div class="caption lft ltb" data-x="50" data-y="120" data-speed="300" data-start="1500"
                            data-easing="easeOutExpo" data-end="4500" data-endspeed="300" data-endeasing="easeInSine">
                            <img src="@Url.Content("~/Themes/coworker/Content/images/banner/aunty.png")" alt="mac" /></div>
                        <div class="caption large_text sfr" style="background-color: #666; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
                            font-weight: 300; font-size: 20px; line-height: 32px; padding: 3px 9px;" data-x="570"
                            data-y="170" data-speed="300" data-start="1800" data-easing="easeOutBack" data-end="4000"
                            data-endspeed="300" data-endeasing="easeInBack">
                            FPC/BTB/LVDS Connectors</div>
                        <div class="caption large_text sfr" style="background-color: #4F7D59; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
                            font-weight: 300; font-size: 20px; line-height: 32px; padding: 3px 9px;" data-x="570"
                            data-y="212" data-speed="300" data-start="2000" data-easing="easeOutBack" data-end="4250"
                            data-endspeed="300" data-endeasing="easeInBack">
                            2.0MM Future Bus Connectors</div>
                        <div class="caption large_text sfr" style="background-color: #487984; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
                            font-weight: 300; font-size: 20px; line-height: 32px; padding: 3px 9px;" data-x="570"
                            data-y="254" data-speed="300" data-start="2200" data-easing="easeOutBack" data-end="4500"
                            data-endspeed="300" data-endeasing="easeInBack">
                            2.0MM Hard Metric Connectors</div>
                        <div class="caption lft ltb" data-x="50" data-y="105" data-speed="300" data-start="5500"
                            data-easing="easeOutExpo" data-end="8500" data-endspeed="300" data-endeasing="easeInSine">
                            <img src="@Url.Content("~/Themes/coworker/Content/images/banner/aunty.png")" alt="ipad" /></div>
                        <div class="caption large_text sfr" style="background-color: #666; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
                            font-weight: 300; font-size: 20px; line-height: 32px; padding: 3px 9px;" data-x="570"
                            data-y="170" data-speed="300" data-start="5800" data-easing="easeOutBack" data-end="8000"
                            data-endspeed="300" data-endeasing="easeInBack">
                            DVI/VGA Connectors</div>
                        <div class="caption large_text sfr" style="background-color: #4F7D59; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
                            font-weight: 300; font-size: 20px; line-height: 32px; padding: 3px 9px;" data-x="570"
                            data-y="212" data-speed="300" data-start="6000" data-easing="easeOutBack" data-end="8250"
                            data-endspeed="300" data-endeasing="easeInBack">
                            USB.2.0/USB3.0 Connectors</div>
                        <div class="caption large_text sfr" style="background-color: #487984; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
                            font-weight: 300; font-size: 20px; line-height: 32px; padding: 3px 9px;" data-x="570"
                            data-y="254" data-speed="300" data-start="6200" data-easing="easeOutBack" data-end="8500"
                            data-endspeed="300" data-endeasing="easeInBack">
                            HDMI/Displayport Connectors</div>
                        <div class="caption lft ltb" data-x="55" data-y="90" data-speed="300" data-start="9000"
                            data-easing="easeOutExpo" data-end="12000" data-endspeed="300" data-endeasing="easeInSine">
                            <img src="@Url.Content("~/Themes/coworker/Content/images/banner/aunty.png")" alt="iphone" /></div>
                        <div class="caption large_text sfr" style="background-color: #666; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
                            font-weight: 300; font-size: 20px; line-height: 32px; padding: 3px 9px;" data-x="570"
                            data-y="170" data-speed="300" data-start="9300" data-easing="easeOutBack" data-end="11500"
                            data-endspeed="300" data-endeasing="easeInBack">
                            Wire Harness Assembly</div>
                        <div class="caption large_text sfr" style="background-color: #4F7D59; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
                            font-weight: 300; font-size: 20px; line-height: 32px; padding: 3px 9px;" data-x="570"
                            data-y="212" data-speed="300" data-start="9500" data-easing="easeOutBack" data-end="11750"
                            data-endspeed="300" data-endeasing="easeInBack">
                            OEM Cable</div>
                        <div class="caption large_text sfr" style="background-color: #487984; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, Serif;
                            font-weight: 300; font-size: 20px; line-height: 32px; padding: 3px 9px;" data-x="570"
                            data-y="254" data-speed="300" data-start="9700" data-easing="easeOutBack" data-end="12000"
                            data-endspeed="300" data-endeasing="easeInBack">
                            OEM Wiring Harness
                        </div>
                    </li>
                    <li data-transition="3dcurtain-vertical" data-slotamount="10" data-masterspeed="300">
                        <img src="@Url.Content("~/Themes/coworker/Content/images/banner/bg3.jpg")" alt="bg image" />
                        <div class="caption randomrotate" data-x="85" data-y="125" data-speed="500" data-start="800"
                            data-easing="easeInOutElastic">
                            <img src="@Url.Content("~/Themes/coworker/Content/images/banner/b1.png")" alt="Image 1" /></div>
                        <div class="caption randomrotate" data-x="270" data-y="70" data-speed="500" data-start="1300"
                            data-easing="easeInOutElastic">
                            <img src="@Url.Content("~/Themes/coworker/Content/images/banner/b3.png")" alt="Image 2" /></div>
                        <div class="caption randomrotate" data-x="605" data-y="170" data-speed="500" data-start="1800"
                            data-easing="easeInOutElastic">
                            <img src="@Url.Content("~/Themes/coworker/Content/images/banner/b4.png")" alt="Image 3" /></div>
                    </li>
                </ul>
                <div class="slider-line">
                </div>
            </div>
        </div>
        <script type="text/javascript">

            var tpj = jQuery;
            tpj.noConflict();

            tpj(document).ready(function () {

                if (tpj.fn.cssOriginal != undefined)
                    tpj.fn.css = tpj.fn.cssOriginal;

                tpj('.fullwidthbanner').revolution(
    						{
    						    delay: 9000,
    						    startwidth: 1020,
    						    startheight: 400,

    						    onHoverStop: "off", 					// Stop Banner Timet at Hover on Slide on/off

    						    thumbWidth: 100, 						// Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
    						    thumbHeight: 50,
    						    thumbAmount: 3,

    						    navigationType: "none", 				//bullet, thumb, none, both	 (No Shadow in Fullwidth Version !)
    						    navigationArrows: "verticalcentered", 	//nexttobullets, verticalcentered, none
    						    navigationStyle: "square", 			//round,square,navbar

    						    touchenabled: "on", 					// Enable Swipe Function : on/off

    						    navOffsetHorizontal: 0,
    						    navOffsetVertical: 10,

    						    stopAtSlide: -1, 						// Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
    						    stopAfterLoops: -1, 					// Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic

    						    hideCaptionAtLimit: 0, 				// It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
    						    hideAllCaptionAtLilmit: 0, 			// Hide all The Captions if Width of Browser is less then this value
    						    hideSliderAtLimit: 0, 				// Hide the whole slider, and stop also functions if Width of Browser is less than this value


    						    fullWidth: "on",

    						    shadow: 0								//0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)

    						});

            });
    
        </script>
    </div>
</div>
<div id="content">
    <div class="content-wrap">
        <div class="container clearfix">
            <!-- ============================================
                    Page Content Start
                ============================================= -->
            <div class="promo">
                <h3>
                    东莞市<span>奕鸣电子</span>有限公司</h3>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;东莞市奕鸣电子有限公司是一家專業從事生產各類筆記型電腦、手機、數位相機、消費性電子及電線、電纜產品使用之連接器.本公司已通過UL,CSA,國際安規認證及ISO9001-2000品質管制體系，集產品研發、生產、銷售為一體的現代化高科技（台資）企業。主要產品有：HDMI/DVI/USB連接器、FPC/FFC/BTB連接器、2.00mm
                    Future Bus連接器、Housing/Wafer/Terminal連接器、LVDS精密連接器及精密連接線。我們的產品廣泛用於液晶顯示幕、通訊網路、筆記型電腦、平板電腦、LCD面板、伺服器、電腦週邊傳輸線、通訊交換機等各式高精密連接。
                </span>
            </div>
            <div class="clear">
            </div>
            <div class="col_one_third">
                <div class="product-feature">
                    <span class="icon-copy"></span>
                    <h3>
                        稳定的质量</h3>
                    <p>
                        严格进料检验程序<br />
                        生产前检查确认与原始样品是否相符<br />
                        OQC全检，不流出一个不良品</p>
                </div>
            </div>
            <div class="col_one_third">
                <div class="product-feature">
                    <span class="icon-fullscreen"></span>
                    <h3>
                        现代化的管理</h3>
                    <p>
                        专业化、规模化的工程师团队服务<br />
                        我们始终坚信客户第一<br />
                        全自动化生产机械设备，保质保量</p>
                </div>
            </div>
            <div class="col_one_third col_last">
                <div class="product-feature">
                    <span class="icon-picture"></span>
                    <h3>
                        完善的服务</h3>
                    <p>
                        专业设计，开发方案
                        <br />
                        专职的业务及业助，高效沟通<br />
                        专业化、规模化的客服团队</p>
                </div>
            </div>
            <div class="clear">
            </div>
            <div class="dotted-divider">
            </div>
            <div class="col_full">
                <h3>
                    <span>产品展示</span>
                </h3>
                <div id="portfolio" class="scroll-portfolio clearfix">
                    @foreach (var product in Model.ProductList.Where(p => p.ProductCategoryId == 12))
                    {
                        <div class="portfolio-item pf-icons">
                            <div class="portfolio-image">
                                <a href="@Url.Action("Index", "Product")">
                                    <img src="@(product.Photo)" alt="Cloud Icon" /></a> <a class="hidden" href="@Url.Content("~/Themes/coworker/Content/images/portfolio/full/1-2.jpg")" rel="prettyPhoto[gal1]">
                                    </a><a class="hidden" href="@Url.Content("~/Themes/coworker/Content/images/portfolio/full/1-3.jpg")" rel="prettyPhoto[gal1]">
                                    </a>
                                <div class="portfolio-overlay">
                                    <div class="portfolio-overlay-wrap">
                                        <p>
                                            名称：@(product.Name)</p>
                                        <p>
                                            描述：@(product.Description)</p>
                                    </div>
                                    <div class="p-overlay-icons clearfix">
                                        <a href="@(product.Photo)" class="p-o-image" rel="prettyPhoto"></a><a href="@Url.Action("ViewDetails", "Product", new { productId = product.ID })" class="p-o-link">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-title">
                                <h3 title="Cloud Icon">
                                    <a href="@Url.Action("ViewDetails", "Product", new { productId = product.ID })">@(product.Name)</a></h3>
                            </div>
                        </div>
                    }
                </div>
                <div id="home-portfolio-prev" class="widget-scroll-prev">
                </div>
                <div id="home-portfolio-next" class="widget-scroll-next">
                </div>
                <script type="text/javascript">

                    jQuery(document).ready(function ($) {

                        var portfolioCarousel = $("#portfolio");

                        portfolioCarousel.carouFredSel({
                            width: "100%",
                            height: "auto",
                            circular: false,
                            responsive: true,
                            infinite: false,
                            auto: false,
                            items: {
                                width: 280,
                                visible: {
                                    min: 1,
                                    max: 4
                                }
                            },
                            scroll: {
                                wipe: true
                            },
                            prev: {
                                button: "#home-portfolio-prev",
                                key: "left"
                            },
                            next: {
                                button: "#home-portfolio-next",
                                key: "right"
                            },
                            onCreate: function () {
                                $(window).on('resize', function () {
                                    portfolioCarousel.parent().add(portfolioCarousel).css('height', portfolioCarousel.children().first().outerHeight() + 'px');
                                }).trigger('resize');
                            }
                        });

                    });
                        
                </script>
            </div>
            <div class="clear">
            </div>
            <div class="dotted-divider">
            </div>
            <div class="col_two_third">
                <div class="tab_widget nobottommargin" id="tabwidget-1">
                    <ul class="tabs">
                        <li><a href="#tab-tab1" data-href="#tab-tab1"><i class="icon-star"></i>新闻公告</a></li>
                        <li><a href="#tab-tab2" data-href="#tab-tab2"><i class="icon-question-sign"></i>行业新闻</a></li>
                        <li><a href="#tab-tab3" data-href="#tab-tab3"><i class="icon-map-marker"></i>招贤纳士</a>
                        </li>
                    </ul>
                    <div class="tab_container">
                        <div id="tab-tab1" class="tab_content entry_content clearfix">
                            @{
                                var news = layoutModels.ArticleList.Where(p => p.CategoryId == 1).OrderByDescending(p => p.CreateTime).FirstOrDefault();
                                if (news != null)
                                {
                                <p>
                                    @(news.Title)：<br />
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@(news.Content)
                                </p>
                                }                            
                            }
                            <ul>
                                @foreach (var article in layoutModels.ArticleList.Where(p => p.CategoryId == 1).Take(6))
                                {
                                    <li class="icon-ok"><a href="@Url.Action("ViewDetails", "News", new { articleId = article.ID })" style="color:#555;">@(article.Title)</a></li>                               
                                }
                            </ul>
                            <div class="clear">
                            </div>
                        </div>
                        <div id="tab-tab2" class="tab_content entry_content clearfix">
                            <ul>
                                @foreach (var article in layoutModels.ArticleList.Where(p => p.CategoryId == 2).Take(6))
                                {
                                    <li class="icon-ok"><a href="@Url.Action("ViewDetails", "News", new { articleId = article.ID })" style="color:#555;">@(article.Title)</a></li>                               
                                }
                            </ul>
                            <div class="clear">
                            </div>
                        </div>
                        <div id="tab-tab3" class="tab_content entry_content clearfix">
                            <div class="col_three_fifth col_last">
                                <p>
                                    业务储备人才（若干名）<br />
                                    职位基本要求 ：<br />
                                    1.从事过1～2年销售相关经验，能接受驻外电子元器件销售工作经验优先<br />
                                    2.熟悉电子元器件及相关电子电路<br />
                                    3.沟通协调能力强，反应敏锐<br />
                                </p>
                            </div>
                            <div class="clear">
                            </div>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">

                    jQuery(document).ready(function ($) {

                        tab_widget('#tabwidget-1');

                    });
                        
                </script>
            </div>
            <div class="col_one_third col_last">
                <h4>
                    <span>推荐产品</span>
                </h4>
                <div class="testimonial-scroller" data-prev="#widget-testimonial-2-prev" data-next="#widget-testimonial-2-next">
                    <div class="testimonials" id="widget-testimonial-2">
                        @foreach (var product in Model.ProductList.Where(p => p.ProductCategoryId == 11))
                        {
                            <div class="testimonial-item">
                                <div class="testi-author">
                                    @(product.Name)</div>
                                <img src="@(product.Photo)" alt="Cloud Icon" style="width: 294px; height: 190px;" />
                            </div>
                        }
                    </div>
                </div>
                <div id="widget-testimonial-2-prev" class="widget-scroll-prev">
                </div>
                <div id="widget-testimonial-2-next" class="widget-scroll-next">
                </div>
            </div>
            <div class="clear">
            </div>
            <div class="dotted-divider">
            </div>
            @*    <div style="position: relative;">
                <h4>
                    <span>友情连接</span></h4>
                <ul id="clients-scroller" class="our-clients clearfix">
                    @foreach (var link in Model.LinkList)
                    {
                        <li><a href="@(link.SiteUrl)">
                            <img src="@(link.ImageUrl)" alt=" @(link.Title)" title=" @(link.Title)" /></a></li>
                    }
                </ul>
                <div class="widget-scroll-prev" id="ourclients_prev">
                </div>
                <div class="widget-scroll-next" id="ourclients_next">
                </div>
                <script type="text/javascript">

                    jQuery(document).ready(function ($) {

                        var clientsCarousel = $("#clients-scroller");

                        clientsCarousel.carouFredSel({
                            width: "100%",
                            height: "auto",
                            circular: false,
                            responsive: true,
                            infinite: false,
                            auto: false,
                            items: {
                                width: 160,
                                visible: {
                                    min: 1,
                                    max: 6
                                }
                            },
                            scroll: {
                                wipe: true
                            },
                            prev: {
                                button: "#ourclients_prev",
                                key: "left"
                            },
                            next: {
                                button: "#ourclients_next",
                                key: "right"
                            },
                            onCreate: function () {
                                $(window).on('resize', function () {
                                    clientsCarousel.parent().add(clientsCarousel).css('height', clientsCarousel.children().first().outerHeight() + 'px');
                                }).trigger('resize');
                            }
                        });

                    });
                        
                </script>
            </div>*@
            <!-- ============================================
                    Page Content End
                ============================================= -->
        </div>
    </div>
</div>
